<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Overlay - KISSY Docs</title>
<link rel="stylesheet" href="../assets/base-min.css"/>
<link rel="stylesheet" href="../assets/docs.css"/>
</head>
<body class="w866">
<div id="header">
    <a class="logo" href="../index.html"><img src="../assets/logo.png" alt="KISSY" width="138" height="74"/></a>
    <p class="rel-nav">
        <a href="http://github.com/kissyteam/kissy/tree/master/src/overlay/">src files</a>
    </p>
</div>
<div id="content" class="layout grid-s232m0">
<div class="col-main">
<div class="main-wrap">
<div class="section summary">
    <p>提供功能: </p>
    <ul>
        <li>页面上的覆盖层;</li>
        <li>Overlay 基类, 扩展出
            <a href="#Dialog">Dialog</a>
        </li>
        <li>见整体 <a
                href="http://kissyteam.github.com/kissy/src/overlay/test.html"
                target="_blank">demo</a>
        </li>
        <li>调研报告, 见 <a
                href="http://kissyteam.github.com/kissy/src/overlay/slide.html">
            slide</a>
        </li>
    </ul>
</div>

<div class="section">
    <h3 id="overlay">Overlay 最简单的使用</h3>
    <div class="member">
        <h4><a name="Overlay">new S.Overlay(config)</a></h4>
        <div class="detail">
            <p>当 config 没有 srcNode 项, 表示新建 Overlay, 如果传入 srcNode,
                表示在此节点基础上产生 Overlay. </p>
            <p>srcNode 节点内容上应该注意标明相应类名，例如</p>            
            <pre class="example-code">
                    &lt;div id="markup1" style="visibility:hidden"&gt;                       
                            从 markup 生成 overlay
                    &lt;/div&gt;
            </pre>
<pre class="example-code">
    <code>
        KISSY.ready(function(S) {
            var popup = new S.Overlay({
                srcNode:"#markup1",
                width: 300,
                height: 200
            });
        });
    </code>
</pre>
        </div>
    </div>
</div>

<div class="section">
    <h3 id="config">Config</h3>

    <div class="member prop">
        <h4><a name="srcNode">srcNode</a> - <code>null | String | HTMLElement | KISSY.Node</code></h4>
        <div class="detail">
            <p>Overlay 容器, 默认为 null 时, 表示新建 DOM，注意设置该配置时，也要设置 autoRender 配置 </p>
<pre class="example-code">
    <code>
        new S.Overlay({srcNode:"#markup1",autoRender:true});
    </code>
</pre>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="autoRender">autoRender</a> - <code>true/false</code></h4>
        <div class="detail">
            <p>是否自动渲染，否则会等 show 时才新建节点，对于设置了 srcNode 时，该配置一定要设置为 true</p>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="shim">shim</a> - <code>true/false</code></h4>
        <div class="detail">
            <p>添加iframe shim，ie6 默认为 true，其他浏览器默认 false</p>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="elCls">elCls</a> - <code>String</code></h4>
        <div class="detail">
            <p>添加到容器的 class </p>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="content">content</a> - <code>undefined | String</code></h4>
        <div class="detail">
            <p>默认为 undefined, 不设置内容. </p>
        </div>
    </div>


    <div class="member prop">
        <h4><a name="width">width</a> - <code>Number</code></h4>
        <div class="detail">
            <p>容器宽度, 默认为 0. </p>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="height">height</a> - <code>Number</code></h4>
        <div class="detail">
            <p>容器高度, 默认为 0. </p>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="zIndex">zIndex</a> - <code>Number</code></h4>
        <div class="detail">
            <p>z-index 值, 默认为9999. </p>
        </div>
    </div>


    <div class="member prop">
        <h4><a name="xy">xy</a> - <code>Array</code></h4>
        <div class="detail">
            <p>相对 page 定位, 有效值为 [n, m]. </p>
            <p class="notice">
                后来, 加入了 x 和 y 两个独立参数, 设置 xy 等价于分别设置 x 和 y.
            </p>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="align">align</a> - <code>Object</code></h4>
        <div class="detail">
            <p>相对指定 node or viewport 定位, 提供子选项</p>
                        <pre class="example-code"><code>
                            align: {
                            // 参考元素, falsy 值为可视区域, 其他为指定元素
                            node: null,
                            // ['tl', 'tr'] 表示 overlay 的 tl 与参考节点的 tr 对齐
                            points: ['cc','cc'],
                            // 水平, 垂直方向上的偏移, 有效值为 [n, m]
                            offset: [0,0]
                            }
                        </code></pre>
            <p>align 使用示例</p>
                        <pre class="example-code"><code>
                            var test = new S.Overlay({
                                width: 300,
                                height: 200,
                                align: {
                                    node: '#archor',
                                    points: ['tr', 'tl'],
                                    offset: [50, 0]
                                }
                            });
                        </code></pre>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="mask">mask</a> - <code>Boolean</code></h4>
        <div class="detail">
            <p>是否显示遮盖层, 默认为不显示. </p>
        </div>
    </div>
</div>

<div class="section">
    <h3 id="members">Memeber</h3>
    <div class="member members">
        <h4><a name="mem_el">el</a> - <code>KISSY.Node</code></h4>
        <div class="detail">
            <p>指向容器元素，通过 get("el") 获取 </p>
        </div>
    </div>


    <div class="member members">
        <h4><a name="mem_contentEl">contentEl</a> - <code>KISSY.Node</code></h4>
        <div class="detail">
            <p>指向内容容器元素，通过 get("contentEl") 获取，注意内容请通过set("content",content)设置 </p>
        </div>
    </div>

    <div class="member members">
        <h4><a name="mem_content">content</a> - <code>string</code></h4>
        <div class="detail">
            <p>指向容器内容，通过 set("content",content) 设置，以及 get("content") 读取</p>
        </div>
    </div>

</div>

<div class="section">
    <h3 id="events">Events</h3>
    <div class="member event">
        <h4><a name="event_show">show</a></h4>
        <div class="detail">
            <p>Overlay 显示之后触发的事件. </p>
        </div>
    </div>
    <div class="member event">
        <h4><a name="event_hide">hide</a></h4>
        <div class="detail">
            <p>Overlay 隐藏之后触发的事件. </p>
        </div>
    </div>
</div>

<div class="section">
    <h3 id="methods">Methods</h3>

    <div class="member prop">
        <h4><a name="method_show">show()</a></h4>
        <div class="detail">
            <p>显示 Overlay. </p>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="method_hide">hide()</a></h4>
        <div class="detail">
            <p>隐藏 Overlay. </p>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="method_move">move(x, y)</a></h4>
        <div class="detail">
            <p>将 Overlay 移动到指定位置上, 绝对位置. </p>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="method_align">align(node, points, offset)</a></h4>
        <div class="detail">
            <p>将 Overlay 定位到指定节点的特定位置上, 如果没有指定 node, 会默认使用 config 中的 align 设置. </p>
        </div>
    </div>

    <div class="member prop">
        <h4><a name="method_center">center()</a></h4>
        <div class="detail">
            <p>将 Overlay 居中到当前可视区域上. </p>
        </div>
    </div>
    <p>
        详见 overlay 的简单 <a
            href="http://kissyteam.github.com/kissy/src/overlay/overlay.html"
            target="_blank">demo</a>
    </p>
</div>

<div class="section">
    <h3 id="Dialog">Dialog 的简单实用</h3>
    <div class="member widget">
        <h4><code> new S.Dialog(config) </code></h4>
        <div class="detail">
            <p>S.Dialog 增加了 header 和 footer, 因此, config 和 method 做了对应调整. </p>
                        <pre>
config:
    headerContent: '',                     // header 内容
    footerContent: '',                     // footer 内容
    bodyContent: '',                       //body 内容
    closable: true                  // 是否需要关闭按钮, 默认需要
    constrain:true/false/string/KISSY.Node/HTMLElement //限制节点
    draggable:true/false            //是否可以拖动头部移动
    closable:true/false             //是否可以关闭                        
Member:
    header                          // 对话框头部的HTML元素
    body                            // 对话框体的HTML元素
    footer                          // 对话框尾部的HTML元素


                        </pre>
        </div>
    </div>
    <div class="section">
        <h3>Config</h3>

        <div class="member prop">
            <h4><a name="headerContent">headerContent</a> - <code>undefined | String</code></h4>
            <div class="detail">
                <p>默认为 undefined, 设置头部内容. </p>
            </div>
        </div>

        <div class="member prop">
            <h4><a name="footerContent">footerContent</a> - <code>undefined | String</code></h4>
            <div class="detail">
                <p>默认为 undefined, 设置尾部内容. </p>
            </div>
        </div>

        <div class="member prop">
            <h4><a name="bodyContent">bodyContent</a> - <code>undefined | String</code></h4>
            <div class="detail">
                <p>默认为 undefined, 设置主体内容. </p>
            </div>
        </div>

        <div class="member prop">
            <h4><a name="closable">closable</a> - <code>true | false</code></h4>
            <div class="detail">
                <p>是否包括关闭按钮</p>
            </div>
        </div>

        <div class="member prop">
            <h4><a name="constrain">constrain</a> - <code>true/false/string/KISSY.Node/HTMLElement</code></h4>
            <div class="detail">
                <p>是否包括限制在某个区域内拖放</p>
            </div>
        </div>

    </div>

    <div class="section">
    <h3>Memeber</h3>
    <div class="member members">
        <h4><a name="mem_header">header</a> - <code>KISSY.Node</code></h4>
        <div class="detail">
            <p>指向头元素，通过 get("header") 获取 </p>
        </div>
    </div>


    <div class="member members">
        <h4><a name="mem_body">body</a> - <code>KISSY.Node</code></h4>
        <div class="detail">
            <p>指向体元素，通过 get("body") 获取，注意内容请通过set("bodyContent",content)设置 </p>
        </div>
    </div>

    <div class="member members">
        <h4><a name="mem_footer">footer</a> - <code>string</code></h4>
        <div class="detail">
            <p>指向尾内容，通过 get("footer") 读取</p>
        </div>
    </div>

</div>

    <p>
        详见 dialog 的简单 <a
            href="http://kissyteam.github.com/kissy/src/overlay/dialog.html"
            target="_blank">demo</a>
    </p>

</div>


<div class="summary">
    <p>更多例子请参见 <a
            href="http://kissyteam.github.com/kissy/src/overlay/test.html"
            target="_blank">demo</a>. </p>
</div>

</div>
</div>
<div class="col-sub">
    <div class="sub-wrap">
        <div class="loc"><a href="../index.html">home</a> › overlay :</div>
        <div class="toc">
            <h3>Usage</h3>
            <ul>
                <li><a href="#Overlay">Overlay</a></li>
                <li><a href="#Dialog">Dialog</a></li>
            </ul>

            <h3>Config</h3>
            <ul>
                <li><a href="#srcNode">srcNode</a></li>
                <li><a href="#autoRender">autoRender</a></li>
                <li><a href="#shim">shim</a></li>
                <li><a href="#content">content</a></li>
                <li><a href="#elCls">elCls</a></li>
                <li><a href="#width">width</a></li>
                <li><a href="#height">height</a></li>
                <li><a href="#zIndex">zIndex</a></li>
                <li><a href="#xy">xy</a></li>
                <li><a href="#align">align</a></li>
                <li><a href="#mask">mask</a></li>
            </ul>

            <h3>Member</h3>
            <ul>
                <li><a href="#mem_el">el</a></li>
                <li><a href="#mem_contentEl">contentEl</a></li>
                <li><a href="#mem_content">content</a></li>
            </ul>

            <h3>Events</h3>
            <ul>
                <li><a href="#event_show">show</a></li>
                <li><a href="#event_hide">hide</a></li>
            </ul>

            <h3>Methods</h3>
            <ul>
                <li><a href="#method_show">show</a></li>
                <li><a href="#method_hide">hide</a></li>
                <li><a href="#method_move">move</a></li>
                <li><a href="#method_align">align</a></li>
                <li><a href="#method_center">center</a></li>
            </ul>

            <h3>Dialog</h3>
            <ul>
                <li><a href="#headerContent">headerContent</a></li>
                <li><a href="#bodyContent">bodyContent</a></li>
                <li><a href="#footerContent">footerContent</a></li>
                <li><a href="#closable">closable</a></li>
                <li><a href="#constrain">constrain</a></li>
                <li><a href="#mem_header">header</a></li>
                <li><a href="#mem_footer">footer</a></li>
                <li><a href="#mem_body">body</a></li>                
            </ul>

        </div>
    </div>
</div>
</div>

<div id="footer">
    <p class="copyright">&copy; 2009 - 2029 KISSY UI LIBRARY</p>
</div>

</body>
</html>
